<template>
  <el-container class="layOutMain">
      <el-aside class="aside" width="200px">
        <SidebarLayout></SidebarLayout>
      </el-aside>
      <el-container>
        <el-header>
          <HeaderLay/>
        </el-header>
        <el-main>
          <router-view/>
        </el-main>
        <!-- <el-footer class="footer">@2022.3</el-footer> -->
      </el-container>
  </el-container>
</template>

<script>
import HeaderLay from "../views/HeaderLay.vue";
import SidebarLayout from "../views/SidebarLayout";

export default {
  name: 'LayOutMain',
  data() {
    return {
      
    };
  },
  components: {
    HeaderLay,
    SidebarLayout
  },
};
</script>

<style scoped>
.layOutMain {
  height: 100%;
}
/* .header {
  height: 80%;
  box-shadow: 14px 4px 10px #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
} */
/* .footer {
  height: 4%;
  color: #333;
  text-align: center;
  vertical-align:middle;
} */
.aside {
  background-color: #606266;
  color: rgb(255, 255, 255);
  /* text-align: center; */
  height: 100%;
}
.el-main {
  --el-main-padding: 0px;
  /* background-color: #f4f4f5; */
  color: #333;
  text-align: center;
  /* line-height: 160px; */
}
</style>
